<template>
  <div id="home-page">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <h1>管理系统</h1>
      <el-menu :router="true" mode="horizontal" background-color="#409EFF" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/user-management" v-if="user && user.role === 'admin'">用户管理</el-menu-item>
        <el-menu-item index="/warehouse-overview">仓库概览</el-menu-item>
        <el-menu-item index="/report">统计报表</el-menu-item>
        <el-menu-item index="/settings">设置中心</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 欢迎信息和简介 -->
    <el-main class="main-content">
      <div class="welcome-section">
        <h2>欢迎使用管理系统</h2>
        <p>这是一个集成了用户管理和仓库管理等功能的系统。</p>
      </div>

      <!-- 功能按钮区 -->
      <div class="button-container">
        <el-button type="primary" @click="$router.push('/user-management')" v-if="user && user.role === 'admin'">用户管理</el-button>
        <el-button type="success" @click="$router.push('/warehouse-overview')">仓库概览</el-button>
        <el-button type="warning" @click="$router.push('/report')">统计报表</el-button>
        <el-button type="info" @click="$router.push('/settings')">设置中心</el-button>
      </div>
    </el-main>

    <!-- 底部信息栏 -->
    <el-footer class="footer">
      <p>&copy; 2025 管理系统 版权所有</p>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      user: null, // 用于存储用户信息
    };
  },
  created() {
    // 在组件创建时，从本地存储或其他地方获取用户信息
    this.user = JSON.parse(localStorage.getItem('user')) || null;
  },
};
</script>

<style scoped>
#home-page {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #409EFF;
  padding: 0 20px;
  color: white;
}

.header h1 {
  font-size: 24px;
  font-weight: bold;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  background: linear-gradient(135deg, #409EFF, #67C23A);
  color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.welcome-section {
  margin-bottom: 20px;
}

.welcome-section h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.welcome-section p {
  font-size: 16px;
  color: #e6f7ff;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.button-container .el-button {
  margin: 10px;
  padding: 15px 30px;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.button-container .el-button:hover {
  transform: scale(1.05);
}

.footer {
  background-color: #f0f2f5;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: #666;
}
</style>